<template>
	<view class="toptop">
		<topfix>
			<template #l>
				<view class="top-l">
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</template>
			<template #c>
				<view class="top-c">
					<view class="fixtut">4/4资质信息</view>
				</view>
			</template>
		</topfix>
	</view>
	<view class="" :style="{height:getstatusheight()+gettitleheight()+'px'}"></view>
	<view class="zz-box">
		<view class="item">
			<view class="item-l">证件名称</view>
			<view class="item-rr">营业执照</view>
		</view>
		<view class="item">
			<view class="item-l">证件名称</view>
			<view class="item-r">
				<input type="text" placeholder="请输入证编号/注册号" v-model="usemdinfostore.mdinfo.shopinfo.yyzz.index" />
			</view>
		</view>
		<view class="item">
			<view class="item-l">有效期</view>
			<view class="item-rrr">
				<uni-datetime-picker ref="pikertimne1" class="pikser" v-model="range" type="daterange"
					@change="maskClick" />
				<view class="rrr-l">{{time1}}</view>
				<view class="rrr-r iconfont icon-jiantouyou"></view>
			</view>
		</view>
		<view class="img">
			<view class="iconfont icon-zhaoxiangji"></view>
			<view class="">证件正面图（毕业设计不上传）</view>
		</view>
		<view class="item">
			<view class="item-l">证件名称</view>
			<view class="item-rr">经营许可证</view>
		</view>
		<view class="item">
			<view class="item-l">证件名称</view>
			<view class="item-r">
				<input type="text" placeholder="请输入证编号/注册号" v-model="usemdinfostore.mdinfo.shopinfo.yyyk.index" />
			</view>
		</view>
		<view class="item">
			<view class="item-l">有效期</view>
			<view class="item-rrr">
				<uni-datetime-picker class="pikser" v-model="range" type="daterange" @change="maskClick2" />
				<view class="rrr-l">{{time2}}</view>
				<view class="rrr-r iconfont icon-jiantouyou"></view>
			</view>
		</view>
		<view class="img">
			<view class="iconfont icon-zhaoxiangji"></view>
			<view class="">证件正面图（毕业设计不上传）</view>
		</view>
		<view class="" style="height:220rpx ;"></view>
	</view>
	<view class="bofix">
		<view class="bu" @click="sendtime">
			提交审核
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import topfix from '@/components/fixtop/fixtop.vue'
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	import {addshopperreq} from '@/api/index.js'
	import mdinfostore from '../../store/mdinfo';
	import userinfostpre from '../../store/userinfo.js';
	const pikertimne1 = ref()
	const useuserinfostpre=userinfostpre()
	const usemdinfostore = mdinfostore()
	const sendtime = async() => {
		const data1 = Object.values(usemdinfostore.mdinfo.shopinfo.yyzz).includes("")
		const data2 = Object.values(usemdinfostore.mdinfo.shopinfo.yyyk).includes("")
		if (data1 || data2) {
			return uni.showToast({
				title: "请填写完整信息！",
				icon: "none"
			})
		}
		const rudata=await addshopperreq({...usemdinfostore.mdinfo,userid:useuserinfostpre.userinfo.id})
		console.log(rudata)
		if(rudata.code==200){
			uni.showToast({
			 	title:"提交成功！",
		     	icon:"none",
			    success() {
			    	setTimeout(()=>{
					  uni.reLaunch({
						 url:"/pages/Audit/Audit"
					  })
				     },1500)
		       	}
			 })
		}
	}
	const time2 = computed(() => {
		return usemdinfostore.mdinfo.shopinfo.yyyk.time ? usemdinfostore.mdinfo.shopinfo.yyyk.time.join('——') :
			"请选择证件有效期"
	})
	const time1 = computed(() => {
		return usemdinfostore.mdinfo.shopinfo.yyzz.time ? usemdinfostore.mdinfo.shopinfo.yyzz.time.join('——') :
			"请选择证件有效期"
	})
	const maskClick = (e) => {
		usemdinfostore.mdinfo.shopinfo.yyzz.time = e
	}
	const maskClick2 = (e) => {
		usemdinfostore.mdinfo.shopinfo.yyyk.time = e
	}
</script>

<style lang="scss" scoped>
	.pikser {
		width: 100%;
	}

	.bofix {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 200rpx;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: center;

		.bu {
			width: 90%;
			height: 80rpx;
			background-color: #ff6e53;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			font-weight: 700;
			border-radius: 80rpx;
			color: #fff;
		}
	}

	.toptop {
		position: fixed;
		top: 0;
		z-index: 99;
		width: 100%;
		background-color: #ff644d;
		padding: 0 30rpx;
	}

	.top-l {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 25rpx;
			color: #fff;
			transform: rotate(180deg);
		}
	}

	.top-c {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.fixtut {
			font-size: 25rpx;
			color: #fff;
		}

	}

	.zz-box {
		width: 100%;
		padding: 0 30rpx;
		background-color: #fff;

		.item {
			width: 100%;
			display: flex;
			height: 120rpx;
			align-items: center;

			.item-rrr {
				position: relative;
				width: 75%;
				height: 60%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #f7f7f7;
				font-size: 25rpx;
				border-radius: 10rpx;
				padding: 0 20rpx;
				color: #7b7b7b;

				:deep(.uni-date) {
					position: absolute;
				}

				:deep(.uni-date-editor) {
					opacity: 0;
				}

				.iconfont {
					font-size: 25rpx;
				}
			}

			.item-l {
				width: 25%;
				font-size: 25rpx;
				font-weight: 700;
			}

			.item-rr {
				width: 75%;
				height: 60%;
				display: flex;
				align-items: center;
				font-size: 25rpx;
			}

			.item-r {
				width: 75%;
				height: 60%;
				background-color: #f7f7f7;
				border-radius: 10rpx;

				input {
					height: 100%;
					font-size: 25rpx;
					width: 100%;
					padding-left: 20rpx;
				}
			}
		}
	}

	.img {
		margin: 20rpx 0;
		height: 450rpx;
		width: 100%;
		background-color: #f7f7f7;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #7b7b7b;
		font-size: 25rpx;
		gap: 20rpx;

		.iconfont {
			font-size: 75rpx;
			color: #7b7b7b;
		}
	}
</style>